<template>
    <el-select :class="['render-select', { 'select-preview': previewOption.mode == 'preview' }]"
        v-model="element.options.dataValue"
        :multiple="element.options.multiple"
        :collapse-tags="element.options.collapseTags"
        :multiple-limit="element.options.multipleLimit"
        :size="element.options.size"
        :clearable="element.options.clearable"
        :filterable="element.options.filterable"
        :placeholder="element.options.placeholder"
        @change="handleChange"
        :disabled="previewOption.mode == 'preview'">
        <el-option v-for="(item, index) in selectOption"
            :key="index"
            :label="item[element.options.label]"
            :value="item[element.options.value]">
        </el-option>
    </el-select>
</template>

<script>
import Observer from "@/utils/eventBus.js";
export default {
    name: "RenderSelect",
    props: {
        element: {
            type: Object
        },
        Api: {
            type: Object
        },
        previewOption: {
            type: Object
        },
        index: {
            type: Number
        }
    },
    data() {
        return {
            selectOption: []
        }
    },
    methods: {
        handleChange(val) { // 提取字段
            if (this.element.options.dataReturnField) Observer.$emit('dataReturnField', {
                index: this.index,
                field: this.element.options.dataReturnField,
                value: val || ""
            })
        }
    },
    mounted() {
        this.$nextTick(() => {
            if (this.element.options.api) {
                let apiData = this.Api.options.find(item => item.api === this.element.options.api) || null;
                this.selectOption = apiData.data || [];
            }
            // 编辑加载时回显提取数据
            if (this.element.options.dataReturnField && this.element.options.dataValue) Observer.$emit('dataReturnField', {
                index: this.index,
                field: this.element.options.dataReturnField,
                value: this.element.options.dataValue
            });
        })
    }
}
</script>
